<%--
  Created by IntelliJ IDEA.
  User: 坤
  Date: 2024/8/18
  Time: 14:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <%
        String base = request.getContextPath() + "/";
        String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + base;
    %>
    <base href="<%=url%>">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>票据管理系统</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <script type="text/javascript" src="assets/js/jquery-1.8.3.js"></script>
</head>

<body data-type="generalComponents">
<header class="am-topbar am-topbar-inverse admin-header">
    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
            <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                    <span class="tpl-header-list-user-nick">禁言小张</span><span class="tpl-header-list-user-ico"> <img
                        src="assets/img/user01.png"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="login.jsp"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <style>
        .ele-dot-text {
            width: 45px;
            display: inline-block;
            margin-left: 20px;
        }

        .ele-dot-status {

            width: 8px;
            height: 8px;
            display: inline-block;
            border-radius: 50%;
            line-height: 10px;
        }

        .ele-dot-status-success {
            background: #52c41a;
        }

        .ele-dot-status-transfering {
            background: #8E44AD;
        }

        .ele-dot-status-error {
            background: #ff4d4f;
        }

        .ele-dot-status-info {
            background: #1890ff;
        }
    </style>
</header>

<div class="tpl-page-container tpl-page-header-fixed">
    <div class="tpl-left-nav tpl-left-nav-hover">
        <div class="tpl-left-nav-list">
            <ul class="tpl-left-nav-menu">
                <li class="tpl-left-nav-item">
                    <a href="javascript:;" class="nav-link tpl-left-nav-link-list active">
                        <i class="am-icon-table"></i>
                        <span>凭证管理</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right tpl-left-nav-more-ico-rotate"></i>
                    </a>
                    <ul class="tpl-left-nav-sub-menu" style="display:block">
                        <li>
                            <a href="transfer-list.jsp" class="active">
                                <i class="am-icon-angle-right"></i>
                                <span>转让列表</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="tpl-left-nav-item">
                    <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
                        <i class="am-icon-wpforms"></i>
                        <span>我的凭证</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                    </a>
                    <ul class="tpl-left-nav-sub-menu">
                        <li>
                            <a href="my-ticket-list.jsp">
                                <i class="am-icon-angle-right"></i>
                                <span>我的凭证列表</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            转让列表
        </div>
        <ol class="am-breadcrumb">
            <li class="am-active"><a style="color: #999999;">凭证管理</a></li>
            <li class="am-active">转让列表</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                                <span class="am-input-group-btn">
                                    <span style="font-size: 14px;margin-right: 8px;margin-left: 8px">转让编号</span>
                                </span>
                            <input type="text" class="am-form-field" placeholder="&nbsp;&nbsp;请输入转让编号"
                                   style="border: 1px solid #c2cad8;width: 68%;border-radius: 3px;" name="no">
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-form-group">
                            <span style="font-size: 14px;">收单企业</span>
                            <select data-am-selected="{btnSize: 'sm'}" name="recive">
                                <option value="-1">请选择收单企业</option>
                                <option value="a">百度科技有限公司</option>
                                <option value="b">京东集团</option>
                                <option value="c">小米</option>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-form-group">
                            <span style="font-size: 14px;">开单企业</span>
                            <select class="am-form-field" data-am-selected="{btnSize: 'sm'}" name="open">
                                <option value="-1">请选择开单企业</option>
                                <option value="d">腾讯科技有限公司</option>
                                <option value="e">隆基股份有限公司</option>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                                <span class="am-input-group-btn">
                                    <span style="font-size: 14px;margin-right: 8px;margin-left: 8px">开单日期</span>
                                </span>
                            <input type="text" class="am-form-field" <%--data-am-datepicker--%>
                                   placeholder="&nbsp;&nbsp;请选择日期"
                                   style="border: 1px solid #c2cad8;width: 68%;border-radius: 3px;"
                                   name="opentime">
                        </div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                                <span class="am-input-group-btn">
                                    <span style="font-size: 14px;margin-right: 8px;margin-left: 8px">凭证金额</span>
                                </span>
                            <input type="text" class="am-form-field" placeholder="&nbsp;&nbsp;最低金额(万)"
                                   style="border: 2px solid #c2cad8;width: 32%;border-radius: 3px;" name="min">
                            <div class="am-form-field"
                                 style="width: 0%; border-radius: 3px;border: none;margin-left: 10px;">~
                            </div>
                            <input type="text" class="am-form-field" placeholder="&nbsp;&nbsp;最高金额(万)"
                                   style="border: 2px solid #c2cad8;width: 32%;border-radius: 3px;margin-left: 20px;" name="max">
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-3">
                    </div>
                </div>
                <div class="am-g" style="margin-top: 15px;">
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-input-group am-input-group-sm status-type">
                                <span class="am-input-group-btn">
                                    <span style="font-size: 14px;margin-right: 8px;margin-left: 8px">处理状态</span>
                                </span>
                            <div class="am-btn-group am-btn-group-sm">
                                <button type="button" class="am-btn am-btn-primary am-radius" name="all" value="-1">全部</button>
                                <button type="button" class="am-btn am-btn-default" name="successful" value="succ">成功</button>
                                <button type="button" class="am-btn am-btn-default" name="transfering" value="trans">转让中</button>
                                <button type="button" class="am-btn am-btn-default" name="lose" value="lose">失败</button>
                                <br>
                            </div>
                            <span class="am-input-group-btn">
                                    <span style="font-size: 14px;margin-right: 6px;margin-left: 6px"></span>
                                </span>
                            <div class="am-btn-group am-btn-group-sm">
                                <input type="button" class="am-btn am-btn-default" name="select" value="查询">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="am-g">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table class="am-table am-table-striped am-table-hover table-main">
                            <thead>
                            <tr>
                                <th class="table-title">转让编号</th>
                                <th class="table-author am-hide-sm-only">转让金额（元）</th>
                                <th class="table-date am-hide-sm-only">开单企业</th>
                                <th class="table-date am-hide-sm-only">收单企业</th>
                                <th class="table-date am-hide-sm-only">金融机构</th>
                                <th class="table-date am-hide-sm-only">开单日期</th>
                                <th class="table-date am-hide-sm-only">转单日期</th>
                                <th class="table-date am-hide-sm-only">到期日期</th>
                                <th class="table-date am-hide-sm-only">上链地址</th>
                                <th class="table-date am-hide-sm-only">处理状态</th>
                                <th class="table-date am-hide-sm-only">进度状态</th>
                                <th class="table-set">操作</th>
                            </tr>
                            </thead>
                            <tbody id="doc-modal-list">

                            </tbody>
                        </table>
                        <div class="am-cf">
                            <div class="am-fr">
                                <ul class="am-pagination tpl-pagination">
                                    <li class="am-disabled"><a href="#">«</a></li>
                                    <li class="am-active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>
                            </div>
                        </div>
                        <hr>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.get("bill/show", function (transfer) {
            JSON.stringify(transfer);
            showBill(transfer);
        });
        $("[value='查询']").click(function () {
            var no = $("[name='no']").val();
            var time = $("[name='opentime']").val();
            var indexRecive = $("select[name='recive']").val();
            var indexOpen = $("select[name='open']").val();
            var min=$("[name='min']").val();
            var max=$("[name='max']").val();
            //var succ=$("[name='successful']").val();
            //var trans=$("[name='transfering']").val();
            //var lose=$("[name='lose']").val();
            //var str=$()
            $.get("bill/showQuery", {
                "no": no,
                "opentime": time,
                "recive": indexRecive,
                "open": indexOpen,
                "min":min,
                "max":max
                //"successful":succ
                //"transfering":trans,
                //"lose":lose
            }, function (transfer) {
                JSON.stringify(transfer);
                showBill(transfer);
            });
        });
    });


    function showBill(transfer) {
        $("tbody").empty();
        for (var i = 0; i < transfer.length; i++) {
            if (transfer[i].status == "成功") {
                var status1 = "success";
            } else if(transfer[i].status == "失败") {
                var status1 = "error";
            }else if(transfer[i].status == "转让中") {
                var status1 = "transfering";
            }
            $("<tr>" +
                "<td class='am-hide-sm-only'>" + transfer[i].no + "</td>" +
                "<td class='am-hide-sm-only'>" + transfer[i].amount + "</td>" +
                "<td class='am-hide-sm-only'>" + transfer[i].ename + "</td>" +
                "<td class='am-hide-sm-only'>" + transfer[i].companyname + "</td>" +
                "<td class='am-hide-sm-only'>" + transfer[i].bankname + "</td>" +
                "<td class='am-hide-sm-only'>" + transfer[i].opentime + "</td>" +
                "<td class='am-hide-sm-only'>" + transfer[i].transferTime + "</td>" +
                "<td class='am-hide-sm-only'>" + transfer[i].expiryTime + "</td>" +
                "<td class='am-hide-sm-only'>" + transfer[i].uplinkAddress + "</td>" +
                "<td class='am-hide-sm-only'>" +
                "<span class='ele-dot-status ele-dot-status-" + status1 + "'>" +
                "</span>" +
                "<span class='ele-dot-text'>" + transfer[i].status + "</span>" +
                "<td class='am-hide-sm-only'>" + transfer[i].progressStatus + "</td>" +
                "<td>" +
                "<div class='m-btn-toolbar'>" +
                "<div class='am-btn-group am-btn-group-xs'>" +
                "<input type='button' value='详情' onclick='details()'>" +
                "</div>" +
                "</div>" +
                "</td>" +
                "</tr>").appendTo("tbody");
        }
    }

    function details() {
        window.location.href = "http://localhost:8080/billmanager/transfer-detail.jsp";
    }

    function showBut(pageHelper) {
        $("div").empty();
        if (pageHelper.indexPage != 1) {
            $("<input type='button' value='首页' name='1'/>").appendTo("div");
            $("<input type='button' value='上一页' name='" + (pageHelper.indexPage - 1) + "'/>").appendTo("div");
        }
        if (pageHelper.indexPage != pageHelper.countPage) {
            $("<input type='button' value='下一页' name='" + (pageHelper.indexPage + 1) + "'/>").appendTo("div");
            $("<input type='button' value='尾页' name='" + pageHelper.countPage + "'/>").appendTo("div");
        }
    }

    $(document).on("click", "[type='button'][value!='查询']", function () {
        var index = $("select").val();
        var str = $("[name='qval']").val();
        var pageindex = $(this).attr("name");
        $.get("book/queryByBook", {"query": index, "str": str, "pageindex": pageindex}, function (ph) {
            JSON.stringify(ph);
            forBooks(ph.list);
            showBut(ph);
        });
    });
</script>
<script>
    // 提交按钮
    $(function () {
        //状态按钮样式切换
        $('.status-type').find('button').on('click', function () {
            var statusTypeBtnArr = $('.status-type').find('button');
            for (var i = 0; i < statusTypeBtnArr.length; i++) {
                statusTypeBtnArr.eq(i).removeClass('am-btn-primary');
            }
            $(this).addClass('am-btn-primary');
        });
    });
</script>
</body>

</html>
